<template>
  <div>
    <div v-if="!isCollapse" class="sys-title">
      <img class="img" src="~@/assets/exchange.jpg" alt="ex logo" />
      <span class="text">交易所</span>
    </div>
    <div v-else class="sys-title">
      <img class="img" src="~@/assets/exchange.jpg" alt="ex logo" />
    </div>
    <!-- 利用el-scrollbar 优化滚动条样式 -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        :unique-opened="false"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import variables from "styles/variables.module.scss";
import { routes } from "@/router";
import { useStore } from "vuex";
import SidebarItem from "./SidebarItem.vue";

const store = useStore();
const sidebar = store.state.sidebar;

const isCollapse = computed(() => {
  return !sidebar.opened;
});

const activeMenu = computed(() => {
  const route = useRoute();
  return route.path;
});
</script>

<style lang="scss" scoped>
.sys-title {
  font-size: 24px;
  color: #fff;
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 32px;
    height: 32px;
  }
  .text {
    margin-left: 10px;
  }
}

.el-menu-vertical {
  font-size: 24px;
}
</style>
